*{
    margin: 0;
    padding: 0;
}

body{
    background: #1acbfc;
    /* position: relative; */
}

.traffic-light{
    width: 10em;
    height: 22.5em;
    border: 0.5em solid #eee;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2em;
    background: #333;
}

.traffic-light::after{
    content: '';
    width: 3em;
    height: 8em;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #eee;
}

.light{
    width: 6em;
    height: 5.5em;
    background: #000;
    border-radius: 50%;
    border-top: 0.5em solid #000;
    margin:  1em auto;
}

.red{
    animation: red 10s linear infinite;

}

@keyframes red{
    0%{
        background: #000;
    }
    2%, 40%{
        background: red;
    }
    42%,100%{
        background: #000;
    }
}

.yellow{
    animation: yellow 10s linear infinite;
}



@keyframes yellow{
    0%, 20%{
        background: #000;
    }
    22%, 40%{
        background: #ff7e00;
    }
    42%,80%{
        background: #000;
    }
    82%, 100%{
        background: #ff7e00;
    }
}


.green{
    animation: green 10s linear infinite;
}

@keyframes green{
    0%, 40%{
        background: #000;
    }
    42%, 80%{
        background: green;
    }
    82%,100%{
        background: #000;
    }
}
